<template>
  <div class="product-two">
    <div class="pc-pic">
      <div
        v-for="(item, index) in arrays"
        :key="item.id"
        :class="currentIndex == index ? 'current' : ''"
        @mouseover="changeIndex(1)"
        @mouseout="changeIndexBack(1)"
      >
        <img :src="cover" alt="" v-show="!showimg1" />
        <img :src="pic" alt="" v-show="showimg1" />
      </div>
    </div>
    <div class="pc-detail">
      <div>
        <span>{{ title }}</span>
        <span>{{ modul }}</span>
        <span>{{ detail }}</span>
        <span>{{ price }}</span>
      </div>
    </div>
    <div class="btn">
           <el-button
        type="info"
        style="background-color: #000"
        @click="$router.push(`/product/details/${pid}`)"
        >加入购物车</el-button
      >
      <el-button type="danger" plain>在线试妆</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["cover", "title", "modul", "price", "detail", "color", "pic","pid"],
  data() {
    return {
      showimg1: false,
      showimg2: false,
      currentIndex: 0,
      page:1,
      pagesize:20,
      items:[],
      arrays: [
        {
          c: "#fbceb1",
          pic: "https://sdcdn.io/mac/cn/mac_sku_MYH211_1x1_0.png?width=1080&height=1080",
          pic2: "https://sdcdn.io/mac/cn/mac_sku_MYH211_1x1_1.png?width=1080&height=1080",
          describe: "Powder Brush / The Disney Cruella Collection By M·A·C",
        },
        {
          c: "#f3c5a1",
          pic: "https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_0.png?width=1080&height=1080",
          pic2: "	https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_1.png?width=1080&height=1080",
          describe: "用于液体/面霜，超细，勾勒眼周线条",
        },
        {
          c: "#f6d0ab",
          pic: "https://sdcdn.io/mac/cn/mac_sku_MYH212_1x1_0.png?width=1080&height=1080",
          pic2: "	https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_1.png?width=1080&height=1080",
          describe: "形状如桨，适于涂抹和混合眼影，由天然软鬃毛及合成纤维制成",
        },
        {
          c: "#efb792",
          pic: "https://sdcdn.io/mac/cn/mac_sku_MYH218_1x1_0.png?width=1080&height=1080",
          pic2: "	https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_1.png?width=1080&height=1080",
          describe: "扁平刷尖呈一定角度，能使色彩贴合眼皮及眼角",
        },
        {
          c: "#efb084",
          pic: "https://sdcdn.io/mac/cn/mac_sku_MYH220_1x1_0.png?width=1080&height=1080",
          pic2: "	https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_1.png?width=1080&height=1080",
        },
      ],
    };
  },
//   mounted(){
//     let params={page:this.page , pagesize:this.pagesize}
//     this.$http.productApi.queryListAll(params).then(res=>{
//       this.items=res.data.data
      
     
//   })
// },
  methods: {
    
    //  移入
    changeIndex(e) {
      this[`showimg${e}`] = true;
    },
    // 移出
    changeIndexBack(e) {
      this[`showimg${e}`] = false;
    },
    change: function (index) {
      this.currentIndex = index;
    },
  },
};
</script>
<style lang="scss" scoped>
.product-two {
  width: 350px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin-right: 43px;
  margin-bottom: 50px;

  &:nth-child(3n) {
    margin-right: 1px;
  }

  .pc-pic {
    border: 1px solid #ccc;

    > div {
      display: none;

      &.current {
        display: block;
      }
    }

    img {
      width: 340px;
      height: 340px;
      margin: 0 auto;
    }
  }

  .pc-detail {
    padding-top: 10px;
    height: 130px;
    display: flex;
    flex-direction: column;

    > p {
      color: #999;
      display: none;
      font-size: 12px;

      &.current {
        display: block;
      }
    }

    div {
      display: flex;
      flex-direction: column;
      font-size: 12px;

      span {
        margin: 2px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &:nth-child(1) {
          font-size: 18px;
          font-weight: 700;
        }

        &:nth-child(2) {
          &:hover {
            color: #999;
          }
        }
        &:nth-child(3) {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        &:nth-child(4) {
          font-size: 16px;
          margin: 20px 0;
          font-weight: 700;
        }
      }
    }
  }

  .btn {
    display: flex;
    justify-content: space-between;

    ::v-deep .el-button {
      width: 200px;
      height: 60px;
    }
  }
}
</style>